<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin="anonymous"
      integrity="sha512-RuUMLxuB8daxj+iqjuwA7u2lFFFQNlbnFnerb0FPhfZ761E0Wn6wD4f5vZskYgbxu+wSu36vfFHCUDaKaHHhUQ=="
      src="http://lib.baomitu.com/echarts/5.0.2/echarts.common.js"
    ></script>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>
  </body>
  <script>
    var myChart = echarts.init(document.getElementById("main"));
    const xAxisData = [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "⑥月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ];
    const yAxisData = [
      3000, 2000, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100,
    ];
    const yAxisData2 = [
      1100, 1100, 1100, 700, 500, 1700, 1600, 100, 200, 330, 1200, 10,
    ];
    const option = {
      tooltip: {
        triggerOn: "none",
        alwaysShowContent: true,
        position: function (pt) {
          return [pt[0], 130];
        },
        show: true,
        trigger: "axis",
      },
      legend: {
        data: ["康师傅", "今麦郎"],
      },
      //类目轴
      xAxis: {
        type: "category",
        data: xAxisData,
        
        //紧挨边缘
        // boundaryGap:false
      },
      //数值轴
      yAxis: {
        type: "value",
        //缩放，脱离0值
        scale: true,
      },
      series: [
        {
          name: "康师傅",
          type: "line",
          data: yAxisData,
          stack: "all",
          markLine: {
            data: [{ type: "average" }],
          },
          smooth: true,
          lineStyle: {
            color: "red",
          },
          //区域颜色
          areaStyle: {
            color: "blue",
          },
          //区域标志
          markArea: {
            data: [
              [
                {
                  xAxis: "一月",
                },
                {
                  xAxis: "二月",
                },
              ],
              [{ xAxis: "七月" }, { xAxis: "十月" }],
            ],
          },
        },
        ,
        {
          name: "今麦郎",
          type: "line",
          data: yAxisData2,
          stack: "all",
          areaStyle: {},
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</html>
